<template>
	<view class="main-page" style="background-color: white;align-items: center;">
		<view class="avatar-container" >
			<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="getAvatar"></button>
			<image class="avatar-img" src="../../static/ic_logo.png" v-if="!avatarUrl"></image>
			<image class="avatar-img" :src="avatarUrl" v-if="avatarUrl"></image>
			<image class="camera-ic" src="../../static/ic_camera.png"></image>
		</view>
		<text class="font-999-28 mt-30">点击设置头像</text>
		<view class="single-container mt-60">
			<text class="font-333-34">我的昵称</text>
			<input 
				:value="nickname"
				placeholder="请设置您的昵称"
				class="font-333-34"
				placeholder-class="font-999-34"
				style="text-align: right;"
				maxlength="10"
				type="nickname"
				@blur="bindBlur"
			/>
		</view>
		<view class="divider"></view>
		<view class="single-container">
			<text class="font-333-34">我的手机号</text>
			<text class="bind-mobile" v-if="!mobile">点击绑定</text>
			<button class="bind-mobile-btn" v-if="!mobile" 
			open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
			<text class="font-333-34 font-weight-600" v-if="mobile">{{mobile}}</text>
		</view>
		<view class="divider"></view>
		<!-- <view class="single-container">
			<text class="font-333-34">验证码</text>
			<view class="row-container">
				<input 
					v-model="code"
					placeholder="请输入验证码"
					class="font-333-34 mr-20"
					placeholder-class="font-999-34"
					style="width: 204rpx;"
				/>
				<text class="code-btn-active" v-if="canSendCode" @click="handleGetCode">获取验证码</text>
				<text class="code-btn" v-else>{{getCodeText}}</text>
			</view>
		</view> -->
		<!-- <view class="divider"></view> -->
		<text class="confirm-btn" v-if="nickname && avatarUrl && mobile" @click="commitProfile">确认</text>
		<text class="confirm-btn-disable" v-else>确认</text>
		
		<text class="time-str">注册时间：{{registerTime}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl:'' ,
				nickname:'' , 
				mobile:'' , 
				registerTime:'' ,
				code:'' , //验证码
				
				leftMills:60,
				canSendCode:true,
				getCodeText:'重新获取',
				timer:null
			}
		},
		
		onLoad(options) {
			this.registerTime = options.registerTime
			this.mobile = this.cookie.get("jx_mobile")
			this.avatarUrl = this.cookie.get("jx_avatar")
			this.nickname = this.cookie.get("jx_nickname")
		},
		
		onUnload() {
			if (this.timer){
				clearInterval(this.timer)
			}
		},
		
		methods: {
			bindBlur(e){
				this.nickname = e.detail.value
			},
			
			getAvatar(e){
				let that = this
				console.log("chooseAvatar---" + JSON.stringify(e.detail.avatarUrl))
				
				uni.uploadFile({
					url:that.config.url+"/upload/file",
					filePath: e.detail.avatarUrl,
					name : 'file',
					header:{"Authorization":that.cookie.get("jx_token")},
					success: (uploadFileRes) => {
						uni.hideLoading()
						that.avatarUrl = JSON.parse((uploadFileRes.data)).data
					},
					fail:()=>{
						uni.hideLoading()
					}
				})
			},
			
			getPhoneNumber(e){
				console.log("getPhoneNumber----" + JSON.stringify(e))
				
				if (!e.detail.code){
					return
				}
				
				let that = this
				that.http({
					url:"/user/phone",
					method:"GET",
					data:{
						code:e.detail.code,
						encryptedData:e.detail.encryptedData,
						iv:e.detail.iv
					},
					success(data){
						if (data.code == 200){
							that.mobile = data.data
							that.cookie.set("jx_mobile" , that.mobile)
						} else{
							setTimeout(()=>{
								uni.showToast({
									title:data.msg,
									icon:'none'
								})
							} , 500)
						}
					},
					failed(e){
					}
				})
			},
			
			changeAvatar(){
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType:['compressed'],
					success(res) {
						uni.showLoading({
							title:'文件上传中...'
						})
						
						res.tempFilePaths.forEach(tempFilsItem => {
							uni.uploadFile({
								url:that.config.url+"/upload/file",
								filePath: tempFilsItem,
								name : 'file',
								header:{"Authorization":that.cookie.get("jx_token")},
								success: (uploadFileRes) => {
									uni.hideLoading()
									that.avatarUrl = JSON.parse((uploadFileRes.data)).data
								},
								fail:()=>{
									uni.hideLoading()
								}
							})
						})
						
						
					},
					fail(e) {
						console.log('fail---image----' , e)
					}
				})
			},
			
			commitProfile(){
				let that = this
				this.http({
					url:"/user/updateUserDetail",
					method:"POST",
					data:{
						headImg:that.avatarUrl,
						nickName:that.nickname
					},
					success(data){
						if (data.code == 200){
							uni.navigateBack({delta:1})
						}
					},
					failed(e){
					}
				})
				
			},
			
			handleGetCode(){
				if (!this.mobile){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				
				let that = this
				this.http({
					url:"/user/sendCode",
					method:"POST",
					data:{
						mobile: that.mobile
					},
					success(res) {
						if (res.code == 200){
							that.canSendCode = false
							that.timer = setInterval(()=>{
								that.leftMills --
								that.getCodeText = "重新获取(" + that.leftMills + "s)"
								if (that.leftMills <= 0){
									that.canSendCode = true
									that.getCodeText = "重新获取"
									clearInterval(that.timer)
									that.leftMills = 60
								}
							} , 1000)
						}else{
							setTimeout(()=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							} , 500)
						}
					},
					fail(e) {
					}
				})
				
				
			},
			
			
		}
	}
</script>

<style lang="scss">
	.avatar-container{
		width: 150rpx;
		height: 150rpx;
		margin-top: 80rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		
		.avatar-btn{
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 30;
			background: transparent;
		}
		
		.avatar-img{
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 75rpx;
		}
		
		.camera-ic{
			width: 34rpx;
			height: 34rpx;
			position: absolute;
			right: 16rpx;
			bottom: 0rpx;
			z-index: 20;
		}
	}
	
	.single-container{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 100rpx);
		height: 150rpx;
		position: relative;
		
		.bind-mobile{
			color: #333333;
			font-size: 32rpx;
			padding: 12rpx 23rpx;
			background: #FFD100;
			border-radius: 10rpx;
			font-weight: 500;
		}
		
		.bind-mobile-btn{
			width: 174rpx;
			height: 70rpx;
			position: absolute;
			right: 0;
			background: transparent;
		}
		
		.code-btn-active{
			font-size: 28rpx;
			color: #333333;
			font-weight: 600;
			background: #FFD100;
			border-radius: 10rpx;
			padding: 16rpx 36rpx;
		}
		
		.code-btn{
			font-size: 28rpx;
			color: white;
			font-weight: 600;
			background: #CBCBCB;
			border-radius: 10rpx;
			padding: 16rpx 36rpx;
		}
	}
	
	.divider{
		width: calc(100% - 100rpx);
		height: 1rpx;
		background: #ECECEC;
	}
	
	.warn-ic{
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}
	
	.confirm-btn{
		width: calc(100% - 100rpx);
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 160rpx;
		background: #FFD100;
		border-radius: 10rpx;
	}
	
	.confirm-btn-disable{
		width: calc(100% - 100rpx);
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		color: white;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 160rpx;
		background: #CCCCCC;
		border-radius: 10rpx;
	}
	
	.time-str{
		color: #333333;
		font-size: 28rpx;
		margin-top: 30rpx;
		width: 100%;
		text-align: center;
	}
	
	
	button::after {
		border: none;//去除边框
	}
	
</style>
